<template>
  <div class="page-title">
    <img :src="pageTitle" />
    <div class="page-title__text">{{ title }}</div>
    <div v-show="!isDistrict" class="back-btn" @click="handleBack"></div>
  </div>
</template>

<script>
/**
 * ## 页面顶部标题
 */
import pageTitle from '@/assets/page-title.png'
export default {
  name: 'PageTitle',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      pageTitle
    }
  },
  computed: {
    isDistrict () {
      return this.$route.name === 'District'
    }
  },
  methods: {
    handleBack () {
      if (this.isDistrict) return
      this.$emit('back')
      if (this.$route.name === 'Property') {
        this.$router.push({ name: 'District' })
      } else {
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="scss">
.page-title {
  // height: 80px;
  height: $base * 112px;
  display: flex;
  align-items: center;
  // justify-content: center;
  color: #e1e9fa;
  position: relative;
  pointer-events: initial;

  font-size: $base * 36px;
  font-weight: bold;
  // background: url('~@/assets/page-title.png');
  // background-size: 100%;
  // background-repeat: no-repeat;

  img {
    width: 100%;
  }

  .back-btn {
    background: url('~@/assets/back.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: $base * 30px;
    height: $base * 30px;
    margin-left: $base * 10px;
    cursor: pointer;
    position: absolute;
    // margin-top: -10px;
    top: $base * 19px;
  }

  .page-title__text {
    position: absolute;
    top: $base * 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: $base * 30px;
    line-height: $base * 30px;
  }
}
</style>